<template>
  <div class="research-view">
    <div class="research-header">
      <div class="view-title">
        <h1 class="title">
          <span class="title-icon">🧪</span>
          科技研究
        </h1>
        <p class="subtitle">探索新技术，推动文明进步</p>
      </div>
      
      <div class="research-controls">
        <div class="research-points">
          <span class="points-icon">🧪</span>
          <span class="points-value">{{ formatNumber(researchPoints) }}</span>
          <span class="points-label">研究点</span>
          <span class="points-rate">+{{ formatNumber(researchRate) }}/小时</span>
        </div>
        
        <div class="view-filters">
          <select v-model="selectedCategory" class="filter-select">
            <option value="all">所有分类</option>
            <option value="physics">物理学</option>
            <option value="engineering">工程学</option>
            <option value="society">社会学</option>
          </select>
          
          <select v-model="selectedStatus" class="filter-select">
            <option value="all">所有状态</option>
            <option value="available">可研究</option>
            <option value="researching">研究中</option>
            <option value="completed">已完成</option>
            <option value="locked">未解锁</option>
          </select>
        </div>
      </div>
    </div>
    
    <div class="research-content">
      <!-- 当前研究项目 -->
      <div v-if="currentResearch" class="current-research">
        <div class="current-header">
          <h2 class="current-title">当前研究</h2>
          <div class="current-actions">
            <button @click="pauseResearch" class="action-btn">
              <span class="btn-icon">⏸️</span>
              暂停
            </button>
            <button @click="cancelResearch" class="action-btn danger">
              <span class="btn-icon">❌</span>
              取消
            </button>
          </div>
        </div>
        
        <div class="current-project">
          <div class="project-info">
            <div class="project-icon">{{ currentResearch.icon }}</div>
            <div class="project-details">
              <h3 class="project-name">{{ currentResearch.name }}</h3>
              <p class="project-description">{{ currentResearch.description }}</p>
              <div class="project-category">
                <span class="category-icon">{{ getCategoryIcon(currentResearch.category) }}</span>
                <span class="category-name">{{ getCategoryName(currentResearch.category) }}</span>
              </div>
            </div>
          </div>
          
          <div class="project-progress">
            <div class="progress-info">
              <div class="progress-stats">
                <span class="progress-current">{{ formatNumber(currentResearch.currentProgress) }}</span>
                <span class="progress-separator">/</span>
                <span class="progress-total">{{ formatNumber(currentResearch.totalCost) }}</span>
              </div>
              <div class="progress-time">
                <span class="time-remaining">剩余时间: {{ formatTime(currentResearch.timeRemaining) }}</span>
              </div>
            </div>
            
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ width: `${(currentResearch.currentProgress / currentResearch.totalCost) * 100}%` }"
              ></div>
            </div>
            
            <div class="progress-percentage">
              {{ Math.round((currentResearch.currentProgress / currentResearch.totalCost) * 100) }}%
            </div>
          </div>
        </div>
      </div>
      
      <!-- 研究队列 -->
      <div v-if="researchQueue.length > 0" class="research-queue">
        <div class="queue-header">
          <h3 class="queue-title">研究队列</h3>
          <button @click="clearQueue" class="clear-queue-btn">
            <span class="btn-icon">🗑️</span>
            清空队列
          </button>
        </div>
        
        <div class="queue-list">
          <div 
            v-for="(item, index) in researchQueue" 
            :key="item.id"
            class="queue-item"
          >
            <div class="queue-position">{{ index + 1 }}</div>
            <div class="queue-icon">{{ item.icon }}</div>
            <div class="queue-info">
              <div class="queue-name">{{ item.name }}</div>
              <div class="queue-cost">{{ formatNumber(item.totalCost) }} 研究点</div>
            </div>
            <div class="queue-actions">
              <button @click="moveUp(index)" :disabled="index === 0" class="queue-btn">
                <span class="btn-icon">⬆️</span>
              </button>
              <button @click="moveDown(index)" :disabled="index === researchQueue.length - 1" class="queue-btn">
                <span class="btn-icon">⬇️</span>
              </button>
              <button @click="removeFromQueue(index)" class="queue-btn danger">
                <span class="btn-icon">❌</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 科技树 -->
      <div class="tech-tree">
        <div class="tree-header">
          <h3 class="tree-title">科技树</h3>
          <div class="tree-legend">
            <div class="legend-item">
              <div class="legend-color available"></div>
              <span class="legend-text">可研究</span>
            </div>
            <div class="legend-item">
              <div class="legend-color researching"></div>
              <span class="legend-text">研究中</span>
            </div>
            <div class="legend-item">
              <div class="legend-color completed"></div>
              <span class="legend-text">已完成</span>
            </div>
            <div class="legend-item">
              <div class="legend-color locked"></div>
              <span class="legend-text">未解锁</span>
            </div>
          </div>
        </div>
        
        <div class="tech-categories">
          <div 
            v-for="category in categories" 
            :key="category.id"
            class="tech-category"
            :class="{ active: selectedCategory === category.id || selectedCategory === 'all' }"
          >
            <div class="category-header">
              <div class="category-info">
                <span class="category-icon">{{ category.icon }}</span>
                <span class="category-name">{{ category.name }}</span>
              </div>
              <div class="category-progress">
                <span class="progress-text">{{ category.completed }}/{{ category.total }}</span>
                <div class="progress-bar-small">
                  <div 
                    class="progress-fill" 
                    :style="{ width: `${(category.completed / category.total) * 100}%` }"
                  ></div>
                </div>
              </div>
            </div>
            
            <div class="tech-grid">
              <div 
                v-for="tech in getFilteredTechs(category.id)" 
                :key="tech.id"
                class="tech-card"
                :class="[
                  `status-${tech.status}`,
                  { selected: selectedTech?.id === tech.id }
                ]"
                @click="selectTech(tech)"
              >
                <div class="tech-icon">{{ tech.icon }}</div>
                <div class="tech-info">
                  <div class="tech-name">{{ tech.name }}</div>
                  <div class="tech-cost">{{ formatNumber(tech.totalCost) }}</div>
                </div>
                
                <div v-if="tech.status === 'researching'" class="tech-progress">
                  <div class="progress-bar-mini">
                    <div 
                      class="progress-fill" 
                      :style="{ width: `${(tech.currentProgress / tech.totalCost) * 100}%` }"
                    ></div>
                  </div>
                </div>
                
                <div class="tech-status">
                  <span class="status-icon">{{ getStatusIcon(tech.status) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 科技详情面板 -->
    <div v-if="selectedTech" class="tech-details-panel">
      <div class="panel-header">
        <div class="panel-title-section">
          <div class="panel-icon">{{ selectedTech.icon }}</div>
          <div class="panel-title-info">
            <h2 class="panel-title">{{ selectedTech.name }}</h2>
            <div class="panel-category">
              <span class="category-icon">{{ getCategoryIcon(selectedTech.category) }}</span>
              <span class="category-name">{{ getCategoryName(selectedTech.category) }}</span>
            </div>
          </div>
        </div>
        <button @click="closeDetails" class="close-btn">✕</button>
      </div>
      
      <div class="panel-content">
        <div class="tech-description">
          <h4 class="description-title">描述</h4>
          <p class="description-text">{{ selectedTech.description }}</p>
        </div>
        
        <div class="tech-requirements" v-if="selectedTech.requirements.length > 0">
          <h4 class="requirements-title">前置科技</h4>
          <div class="requirements-list">
            <div 
              v-for="req in selectedTech.requirements" 
              :key="req.id"
              class="requirement-item"
              :class="{ completed: req.completed }"
            >
              <span class="req-icon">{{ req.icon }}</span>
              <span class="req-name">{{ req.name }}</span>
              <span class="req-status">{{ req.completed ? '✅' : '❌' }}</span>
            </div>
          </div>
        </div>
        
        <div class="tech-effects" v-if="selectedTech.effects.length > 0">
          <h4 class="effects-title">研究效果</h4>
          <div class="effects-list">
            <div 
              v-for="effect in selectedTech.effects" 
              :key="effect.id"
              class="effect-item"
            >
              <span class="effect-icon">{{ effect.icon }}</span>
              <div class="effect-info">
                <div class="effect-name">{{ effect.name }}</div>
                <div class="effect-description">{{ effect.description }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="tech-cost-info">
          <h4 class="cost-title">研究成本</h4>
          <div class="cost-details">
            <div class="cost-item">
              <span class="cost-icon">🧪</span>
              <span class="cost-value">{{ formatNumber(selectedTech.totalCost) }} 研究点</span>
            </div>
            <div class="cost-item">
              <span class="cost-icon">⏱️</span>
              <span class="cost-value">{{ formatTime(selectedTech.estimatedTime) }}</span>
            </div>
          </div>
        </div>
        
        <div class="tech-actions">
          <button 
            v-if="selectedTech.status === 'available'"
            @click="startResearch(selectedTech)"
            class="action-btn primary"
            :disabled="!canStartResearch(selectedTech)"
          >
            <span class="btn-icon">🚀</span>
            开始研究
          </button>
          
          <button 
            v-if="selectedTech.status === 'available'"
            @click="addToQueue(selectedTech)"
            class="action-btn"
            :disabled="isInQueue(selectedTech)"
          >
            <span class="btn-icon">➕</span>
            加入队列
          </button>
          
          <button 
            v-if="selectedTech.status === 'researching'"
            @click="pauseResearch"
            class="action-btn"
          >
            <span class="btn-icon">⏸️</span>
            暂停研究
          </button>
          
          <button 
            v-if="selectedTech.status === 'completed'"
            @click="viewTechDetails(selectedTech)"
            class="action-btn"
          >
            <span class="btn-icon">📊</span>
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface TechRequirement {
  id: string
  name: string
  icon: string
  completed: boolean
}

interface TechEffect {
  id: string
  name: string
  description: string
  icon: string
}

interface Technology {
  id: string
  name: string
  description: string
  icon: string
  category: string
  status: 'available' | 'researching' | 'completed' | 'locked'
  totalCost: number
  currentProgress: number
  estimatedTime: number
  timeRemaining?: number
  requirements: TechRequirement[]
  effects: TechEffect[]
}

interface TechCategory {
  id: string
  name: string
  icon: string
  completed: number
  total: number
}

// 响应式数据
const selectedCategory = ref('all')
const selectedStatus = ref('all')
const selectedTech = ref<Technology | null>(null)
const researchPoints = ref(15420)
const researchRate = ref(85)

const currentResearch = ref<Technology | null>({
  id: '1',
  name: '高级材料学',
  description: '研究新型合金材料，提高建筑和舰船的耐久性',
  icon: '🔬',
  category: 'engineering',
  status: 'researching',
  totalCost: 2500,
  currentProgress: 1850,
  estimatedTime: 180,
  timeRemaining: 45,
  requirements: [],
  effects: []
})

const researchQueue = ref<Technology[]>([
  {
    id: '2',
    name: '量子计算',
    description: '开发量子计算技术，大幅提升计算能力',
    icon: '💻',
    category: 'physics',
    status: 'available',
    totalCost: 3200,
    currentProgress: 0,
    estimatedTime: 220,
    requirements: [],
    effects: []
  }
])

const categories = ref<TechCategory[]>([
  { id: 'physics', name: '物理学', icon: '⚛️', completed: 8, total: 15 },
  { id: 'engineering', name: '工程学', icon: '⚙️', completed: 12, total: 18 },
  { id: 'society', name: '社会学', icon: '👥', completed: 6, total: 12 }
])

const technologies = ref<Technology[]>([
  {
    id: '1',
    name: '高级材料学',
    description: '研究新型合金材料，提高建筑和舰船的耐久性',
    icon: '🔬',
    category: 'engineering',
    status: 'researching',
    totalCost: 2500,
    currentProgress: 1850,
    estimatedTime: 180,
    requirements: [
      { id: 'basic_materials', name: '基础材料学', icon: '🧱', completed: true }
    ],
    effects: [
      { id: 'hull_strength', name: '船体强度', description: '+25% 舰船装甲', icon: '🛡️' },
      { id: 'building_durability', name: '建筑耐久', description: '+20% 建筑生命值', icon: '🏗️' }
    ]
  },
  {
    id: '2',
    name: '量子计算',
    description: '开发量子计算技术，大幅提升计算能力',
    icon: '💻',
    category: 'physics',
    status: 'available',
    totalCost: 3200,
    currentProgress: 0,
    estimatedTime: 220,
    requirements: [
      { id: 'quantum_theory', name: '量子理论', icon: '⚛️', completed: true },
      { id: 'advanced_computing', name: '高级计算', icon: '🖥️', completed: true }
    ],
    effects: [
      { id: 'research_speed', name: '研究速度', description: '+30% 研究效率', icon: '🚀' },
      { id: 'ai_capability', name: 'AI能力', description: '解锁高级AI技术', icon: '🤖' }
    ]
  },
  {
    id: '3',
    name: '星际外交',
    description: '建立与外星文明的外交关系',
    icon: '🤝',
    category: 'society',
    status: 'available',
    totalCost: 1800,
    currentProgress: 0,
    estimatedTime: 120,
    requirements: [
      { id: 'xenolinguistics', name: '异种语言学', icon: '🗣️', completed: true }
    ],
    effects: [
      { id: 'diplomacy_options', name: '外交选项', description: '解锁更多外交行动', icon: '📜' },
      { id: 'trade_efficiency', name: '贸易效率', description: '+15% 贸易收入', icon: '💰' }
    ]
  },
  {
    id: '4',
    name: '反物质引擎',
    description: '开发反物质推进技术，实现超光速旅行',
    icon: '🚀',
    category: 'physics',
    status: 'locked',
    totalCost: 5000,
    currentProgress: 0,
    estimatedTime: 350,
    requirements: [
      { id: 'antimatter_theory', name: '反物质理论', icon: '⚛️', completed: false },
      { id: 'advanced_propulsion', name: '高级推进', icon: '🔥', completed: false }
    ],
    effects: [
      { id: 'ftl_travel', name: '超光速旅行', description: '舰船移动速度 +200%', icon: '✨' },
      { id: 'exploration_range', name: '探索范围', description: '探索距离 +500%', icon: '🌌' }
    ]
  },
  {
    id: '5',
    name: '基因改造',
    description: '通过基因技术改善人口素质',
    icon: '🧬',
    category: 'society',
    status: 'completed',
    totalCost: 2200,
    currentProgress: 2200,
    estimatedTime: 150,
    requirements: [
      { id: 'genetics', name: '遗传学', icon: '🧬', completed: true }
    ],
    effects: [
      { id: 'population_growth', name: '人口增长', description: '+20% 人口增长率', icon: '👶' },
      { id: 'lifespan', name: '寿命延长', description: '+25% 人口寿命', icon: '⏳' }
    ]
  }
])

// 计算属性
const getFilteredTechs = (categoryId: string) => {
  return technologies.value.filter(tech => {
    const categoryMatch = selectedCategory.value === 'all' || tech.category === categoryId
    const statusMatch = selectedStatus.value === 'all' || tech.status === selectedStatus.value
    return categoryMatch && statusMatch
  })
}

// 方法
function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatTime(minutes: number): string {
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  if (hours > 0) {
    return `${hours}小时${mins}分钟`
  }
  return `${mins}分钟`
}

function getCategoryIcon(category: string): string {
  const icons = {
    physics: '⚛️',
    engineering: '⚙️',
    society: '👥'
  }
  return icons[category as keyof typeof icons] || '❓'
}

function getCategoryName(category: string): string {
  const names = {
    physics: '物理学',
    engineering: '工程学',
    society: '社会学'
  }
  return names[category as keyof typeof names] || category
}

function getStatusIcon(status: string): string {
  const icons = {
    available: '✅',
    researching: '🔄',
    completed: '✅',
    locked: '🔒'
  }
  return icons[status as keyof typeof icons] || '❓'
}

function selectTech(tech: Technology) {
  selectedTech.value = tech
}

function closeDetails() {
  selectedTech.value = null
}

function canStartResearch(tech: Technology): boolean {
  return tech.status === 'available' && 
         tech.requirements.every(req => req.completed) &&
         researchPoints.value >= tech.totalCost
}

function isInQueue(tech: Technology): boolean {
  return researchQueue.value.some(item => item.id === tech.id)
}

function startResearch(tech: Technology) {
  if (canStartResearch(tech)) {
    currentResearch.value = { ...tech, status: 'researching', currentProgress: 0 }
    tech.status = 'researching'
    console.log('开始研究:', tech.name)
  }
}

function addToQueue(tech: Technology) {
  if (!isInQueue(tech)) {
    researchQueue.value.push({ ...tech })
    console.log('加入队列:', tech.name)
  }
}

function pauseResearch() {
  console.log('暂停研究')
}

function cancelResearch() {
  if (currentResearch.value) {
    currentResearch.value.status = 'available'
    currentResearch.value = null
    console.log('取消研究')
  }
}

function clearQueue() {
  researchQueue.value = []
  console.log('清空队列')
}

function moveUp(index: number) {
  if (index > 0) {
    const item = researchQueue.value.splice(index, 1)[0]
    researchQueue.value.splice(index - 1, 0, item)
  }
}

function moveDown(index: number) {
  if (index < researchQueue.value.length - 1) {
    const item = researchQueue.value.splice(index, 1)[0]
    researchQueue.value.splice(index + 1, 0, item)
  }
}

function removeFromQueue(index: number) {
  researchQueue.value.splice(index, 1)
}

function viewTechDetails(tech: Technology) {
  console.log('查看科技详情:', tech.name)
}
</script>

<style scoped>
.research-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.research-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.view-title {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.research-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.research-points {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.points-icon {
  font-size: 1.2rem;
}

.points-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.points-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.points-rate {
  color: var(--success-color);
  font-size: 0.8rem;
  font-weight: 500;
}

.view-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

.research-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.current-research {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.current-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.current-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.current-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.action-btn.primary:hover {
  background: var(--primary-hover);
}

.action-btn.danger {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  font-size: 1rem;
}

.current-project {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.project-info {
  display: flex;
  gap: 1rem;
  flex: 1;
}

.project-icon {
  font-size: 3rem;
  width: 60px;
  text-align: center;
}

.project-details {
  flex: 1;
}

.project-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
}

.project-description {
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  line-height: 1.4;
}

.project-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-icon {
  font-size: 1rem;
}

.category-name {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.project-progress {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 200px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.progress-stats {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.progress-current {
  color: var(--primary-color);
  font-weight: 600;
}

.progress-separator {
  color: var(--text-secondary);
}

.progress-total {
  color: var(--text-secondary);
}

.progress-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.progress-bar {
  height: 12px;
  background: var(--bg-primary);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.progress-percentage {
  text-align: center;
  font-weight: 600;
  color: var(--primary-color);
}

.research-queue {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.queue-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.clear-queue-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--error-color);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.clear-queue-btn:hover {
  background: var(--error-hover);
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.queue-position {
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.queue-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.queue-info {
  flex: 1;
}

.queue-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.queue-cost {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.queue-actions {
  display: flex;
  gap: 0.5rem;
}

.queue-btn {
  width: 32px;
  height: 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.queue-btn:hover {
  background: var(--bg-hover);
}

.queue-btn.danger {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.queue-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tech-tree {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.tree-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tree-legend {
  display: flex;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.available {
  background: var(--success-color);
}

.legend-color.researching {
  background: var(--primary-color);
}

.legend-color.completed {
  background: var(--info-color);
}

.legend-color.locked {
  background: var(--text-secondary);
}

.legend-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.tech-categories {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tech-category {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.tech-category.active {
  opacity: 1;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.category-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.category-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.progress-bar-small {
  width: 100px;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.tech-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tech-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tech-card.selected {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.tech-card.status-available {
  border-left: 4px solid var(--success-color);
}

.tech-card.status-researching {
  border-left: 4px solid var(--primary-color);
}

.tech-card.status-completed {
  border-left: 4px solid var(--info-color);
  opacity: 0.8;
}

.tech-card.status-locked {
  border-left: 4px solid var(--text-secondary);
  opacity: 0.5;
}

.tech-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.75rem;
}

.tech-info {
  flex: 1;
  text-align: center;
}

.tech-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.tech-cost {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.tech-progress {
  margin-top: 0.75rem;
}

.progress-bar-mini {
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
}

.tech-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.status-icon {
  font-size: 1rem;
}

.tech-details-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.panel-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.panel-icon {
  font-size: 2rem;
}

.panel-title-info {
  flex: 1;
}

.panel-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.panel-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tech-description,
.tech-requirements,
.tech-effects,
.tech-cost-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.description-title,
.requirements-title,
.effects-title,
.cost-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.description-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.requirements-list,
.effects-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.requirement-item,
.effect-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.requirement-item.completed {
  border-color: var(--success-color);
  background: rgba(34, 197, 94, 0.1);
}

.req-icon,
.effect-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.req-name,
.effect-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.req-status {
  font-size: 1rem;
}

.effect-info {
  flex: 1;
}

.effect-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.cost-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cost-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.cost-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.cost-value {
  color: var(--text-primary);
  font-weight: 500;
}

.tech-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .research-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .research-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .current-project {
    flex-direction: column;
    align-items: stretch;
  }
  
  .tech-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-details-panel {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>